import React from 'react';
import { Form, Input, Select, Button, Space } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';

const { Option } = Select;

const UnitFilterBar: React.FC<{ onChange: (filters: any) => void }> = ({ onChange }) => {
    const [form] = Form.useForm();

    const onFinish = (values: any) => {
        onChange(values);
    };

    return (
        <div style={{
            padding: '20px',
            background: '#fafafa',
            borderRadius: '8px',
            border: '1px solid #f0f0f0'
        }}>
            <Form layout="inline" form={form} onFinish={onFinish}>
                <div style={{ 
                    display: 'flex', 
                    flexWrap: 'wrap', 
                    gap: '16px',
                    alignItems: 'center',
                    width: '100%'
                }}>
                    <Form.Item 
                        name="unitId" 
                        label={<span style={{ fontWeight: '500', color: '#262626' }}>单元ID</span>}
                        style={{ marginBottom: 0 }}
                    >
                        <Input 
                            placeholder="请输入单元ID" 
                            style={{ 
                                width: '200px',
                                borderRadius: '6px',
                                border: '1px solid #d9d9d9'
                            }}
                            allowClear
                        />
                    </Form.Item>
                    
                    <Form.Item 
                        name="appId" 
                        label={<span style={{ fontWeight: '500', color: '#262626' }}>归属应用</span>}
                        style={{ marginBottom: 0 }}
                    >
                        <Input 
                            placeholder="请输入应用ID" 
                            style={{ 
                                width: '200px',
                                borderRadius: '6px',
                                border: '1px solid #d9d9d9'
                            }}
                            allowClear
                        />
                    </Form.Item>
                    
                    <Form.Item 
                        name="status" 
                        label={<span style={{ fontWeight: '500', color: '#262626' }}>状态</span>}
                        style={{ marginBottom: 0 }}
                    >
                        <Select 
                            style={{ 
                                width: '140px',
                                borderRadius: '6px'
                            }} 
                            placeholder="请选择状态"
                            allowClear
                        >
                            <Option value="active">
                                <span style={{ color: '#52c41a' }}>● 启用</span>
                            </Option>
                            <Option value="inactive">
                                <span style={{ color: '#f5222d' }}>● 停用</span>
                            </Option>
                        </Select>
                    </Form.Item>
                    
                    <Space style={{ marginLeft: 'auto' }}>
                        <Form.Item style={{ marginBottom: 0 }}>
                            <Button 
                                type="primary" 
                                htmlType="submit"
                                icon={<SearchOutlined />}
                                style={{
                                    borderRadius: '6px',
                                    boxShadow: '0 2px 8px rgba(24, 144, 255, 0.2)',
                                    fontWeight: '500'
                                }}
                            >
                                查询
                            </Button>
                        </Form.Item>
                        
                        <Form.Item style={{ marginBottom: 0 }}>
                            <Button 
                                htmlType="button" 
                                icon={<ReloadOutlined />}
                                onClick={() => { 
                                    form.resetFields(); 
                                    onChange({}); 
                                }}
                                style={{
                                    borderRadius: '6px',
                                    border: '1px solid #d9d9d9'
                                }}
                            >
                                重置
                            </Button>
                        </Form.Item>
                    </Space>
                </div>
            </Form>
        </div>
    );
};

export default UnitFilterBar; 